<template>
	<div class="mt-display">
		<mu-container
			:class="{
				tableFlexBindClassContainerL1: tableFlexBindClass > 0,
			}"
		>
			<mu-card
				:raised="false"
				:class="{ tableFlexBindClass: tableFlexBindClass > 0 }"
			>
				<mu-scale-transition>
					<mu-card-title
						v-if="!isSearch"
						v-show="!isSearch"
						:title="currentConfig.title"
					></mu-card-title>
				</mu-scale-transition>
				<mu-expansion-panel :expand="isSearch" @change="isSearch = !isSearch">
					<div slot="header">
						{{ isSearch ? currentConfig.title : "使用检索" }}
					</div>

					<mu-scale-transition>
						<div class="search-cols">
							<template v-for="item in searchMode">
								<mu-text-field
									v-model="item.val"
									v-if="item.isText"
									:key="item.name"
									:placeholder="
										'在' +
										item.name +
										'中检索 ' +
										(item.equal ? '（全字匹配）' : '（部分匹配）')
									"
								>
									<template #append v-if="item.val.length > 0">
										<span class="clear-text" @click="item.val = ''">✖</span>
									</template>
								</mu-text-field>

								<mu-select
									v-if="item.isSelect"
									v-model="item.val"
									:key="item.name"
								>
									<mu-option
										:label="'在' + item.name + '中检索 '"
										value=""
									></mu-option>
									<mu-option
										v-for="option in item.mode"
										:key="item.name + '@' + option.key"
										:label="option.key"
										:value="option.val"
									></mu-option>
								</mu-select>
							</template>

							<div class="table-func">
								<mu-select v-model="pageDivide">
									<mu-option
										v-for="option in pageDivideList"
										:key="'$pageDivide=' + option"
										:label="'每页显示 ' + option + ' 条数据'"
										:value="option"
									></mu-option>
								</mu-select>

								<mu-select v-model="tableDisplayFlex" class="mob-hide">
									<mu-option
										v-for="option in tableDisplayFlexList"
										:key="'$tableDisplayFlex=' + option"
										:label="option"
										:value="option"
									></mu-option>
								</mu-select>

								<div class="download-item">
									<mu-select v-model="downloadOp">
										<mu-option
											v-for="option in downloadOps"
											:key="'$downloadOp=' + option"
											:label="option"
											:value="option"
										></mu-option>
									</mu-select>
									<mu-button @click="downloadFile" style="margin-left: 10px"
										>下载数据</mu-button
									>
								</div>
							</div>

							<mu-card-actions style="width: 100%">
								<mu-button @click="resetSearchMode">重置</mu-button>

								<mu-button @click="isSearch = false">确定</mu-button>
							</mu-card-actions>
						</div>
					</mu-scale-transition>
				</mu-expansion-panel>
				<mu-scale-transition>
					<div v-if="!isSearch" v-show="!isSearch">
						<mu-divider></mu-divider>
						<mu-data-table
							:columns="columns"
							:data="
								pageData.slice(
									page * pageDivide - pageDivide,
									page * pageDivide
								)
							"
							:sort.sync="sortTemp"
							@sort-change="sortData"
						>
							<template #default="scope">
								<td v-if="currentConfig.index" class="is-center">
									{{ scope.$index + page * pageDivide - pageDivide + 1 }}
								</td>
								<td v-for="item in labelList" :key="item" class="is-center">
									{{ scope.row[item] }}
								</td>
							</template>
						</mu-data-table>
						<div class="page-slider" v-show="pageCount > 1">
							<mu-slider
								:step="1"
								:min="1"
								:max="pageCount"
								v-model="page"
							></mu-slider>
						</div>
						<mu-card-actions v-show="pageCount > 1">
							<mu-button flat :disabled="page <= 1" @click="page = page - 1"
								><mu-icon value="arrow_back"></mu-icon
							></mu-button>
							<p class="page-info">{{ page }} / {{ pageCount }}</p>
							<mu-button
								flat
								:disabled="page >= pageCount"
								@click="page = page + 1"
								><mu-icon value="arrow_forward"></mu-icon
							></mu-button>
						</mu-card-actions>
					</div>
				</mu-scale-transition>
			</mu-card>
		</mu-container>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";

import { useTable } from "../utils/table";
export default defineComponent({
	name: "mt-display",
	setup(_, ctx) {
		const {
			page,
			pageData,
			pageCount,
			isSearch,
			columns,
			pageDivide,
			pageDivideList,
			sortData,
			labelList,
			sortTemp,
			searchMode,
			currentConfig,
			resetSearchMode,
			tableDisplayFlex,
			tableDisplayFlexList,
			tableFlexBindClass,
			downloadFile,
			downloadOps,
			downloadOp,
			tableData,
		} = useTable(ctx);

		document.title =
			ctx.root.$store.state.globalConfig.title +
			" | " +
			currentConfig.value.title;

		return {
			page,
			pageData,
			pageCount,
			isSearch,
			columns,
			pageDivide,
			pageDivideList,
			sortData,
			labelList,
			sortTemp,
			searchMode,
			currentConfig,
			resetSearchMode,
			tableDisplayFlex,
			tableDisplayFlexList,
			tableFlexBindClass,
			downloadFile,
			downloadOps,
			downloadOp,
			tableData,
		};
	},
});
</script>

<style>
.tableFlexBindClass {
	width: 95vw !important;
}
.tableFlexBindClassContainerL1 {
	max-width: 120vw;
	width: 95vw;
}
.mt-display {
	padding-top: 99px;
}
@media screen and (max-width: 768px) {
	.mt-display {
		padding-top: 90px;
	}
}

.mt-display .container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.mt-display .mu-card > p {
	text-align: center;
	font-size: 1.5em;
}
.mt-display .mu-card {
	width: 65%;
}
@media screen and (max-width: 1200px) {
	.mt-display .mu-card {
		width: 80%;
	}
}
@media screen and (max-width: 768px) {
	.mt-display .mu-card {
		width: 95%;
	}
}
@media screen and (max-width: 468px) {
	.mob-hide {
		display: none;
	}
}

.mt-display .search-cols {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.mt-display .search-cols .mu-input {
	width: 85%;
}
.mt-display .mu-card-actions {
	display: flex;
	justify-content: space-around;
}

.mt-display .page-slider {
	display: flex;
	justify-content: center;
	transform: translateY(20px);
}
.mt-display .page-slider .mu-slider {
	width: 80%;
}

.mt-display .mu-table {
	width: 100%;
}

.mt-display .clear-text {
	cursor: pointer;
}

.mt-display .table-func {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mt-display .download-item {
	width: 85%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
p.page-info {
	cursor: pointer;
}
</style>
